<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta property="qc:admins" content="465267610762567726375" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
	<title>AJAX 教程 | 菜鸟教程</title>

  <link rel='dns-prefetch' href='//s.w.org'>
<link rel="canonical" href="http://www.runoob.com/ajax/ajax-tutorial.html" />
<meta name="keywords" content="AJAX 教程,Ajax">
<meta name="description" content="function loadXMLDoc() { if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   } else   {// code for IE6, IE5   xmlhttp=new ActiveXObject(&#039;Microsoft.XMLHTTP&..">
		
	<link rel="shortcut icon" href="http://www.runoob.com/favicon.ico" mce_href="http://www.runoob.com/favicon.ico" type="image/x-icon" >
	<link rel="stylesheet" href="http://www.runoob.com/wp-content/themes/runoob/style.css?v=1.02" type="text/css" media="all" />	
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/fontawesome/4.2.0/css/font-awesome.min.css" media="all" />	
  <script src="http://cdn.static.runoob.com/libs/jquery/1.8.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
     <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
  <link rel="apple-touch-icon" href="http://static.runoob.com/images/icon/mobile-icon.png"/>
  <meta name="apple-mobile-web-app-title" content="菜鸟教程">
</head>
<body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link"> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlfile.html" rel="next"> AJAX XML</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<script>
function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>

<h1>AJAX <span class="color_h1">教程</span>
</h1>
<br><div class="tutintro">
<p>AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。</p>
<p>AJAX 不是新的编程语言，而是一种使用现有标准的新方法。</p>
<p>AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。</p>
</div>
<br><div class="example">
<h2 class="example">AJAX 实例</h2>
<div class="example_result notranslate">
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</div>
<br><a target="_blank" href="/try/try.php?filename=tryajax_first" class="tryitbtn">尝试一下 »</a>
</div>
<br><br><p class="tutintro"><a href="ajax-intro.html"><b>现在开始学习 AJAX !</b></a></p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link"> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlfile.html" rel="next"> AJAX XML</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-create.html" rel="prev"> AJAX 创建 XMLHttpRequest 对象</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-example.html" rel="next"> AJAX 实例</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX <span class="color_h1">简介</span>
</h1>
<hr>
<p class="intro">AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。</p>
<hr>
<h2>您应当具备的基础知识</h2>

<p>在继续学习之前，您需要对下面的知识有基本的了解：</p>

<ul>
<li>HTML / XHTML</li>
<li>CSS</li>
<li>JavaScript / DOM</li>
</ul>

<p>如果您希望首先学习这些项目，请在我们的<a href="http://w3cschool.cc" title="W3CSchool 在线教程">首页</a>访问这些教程。</p>

<hr>
<h2>什么是 AJAX ？</h2>

<p>AJAX = 异步 JavaScript 和 XML。</p>

<p>AJAX 是一种用于创建快速动态网页的技术。</p>

<p>通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。</p>

<p>传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。</p>

<p>有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。</p>

<hr>
<h2>AJAX 工作原理</h2>
<p><img alt="AJAX" src="/images/ajax.gif" width="569" height="324"></p>
<hr>
<h2>AJAX是基于现有的Internet标准</h2>
<p>AJAX是基于现有的Internet标准，并且联合使用它们：</p>
<ul>
<li>XMLHttpRequest 对象 (异步的与服务器交换数据)</li>
<li>JavaScript/DOM (信息显示/交互)</li>
<li>CSS (给数据定义样式)</li>
<li>XML (作为转换数据的格式)</li>
</ul>
<p><img src="/images/lamp.gif" width="15" height="15" alt="lamp">  
AJAX应用程序与浏览器和平台无关的！</p>
<hr>
<h2>Google Suggest</h2>

<p>在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。</p>

<p>Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。</p>

<hr>
<h2>今天就开始使用 AJAX</h2>

<p>AJAX 基于已有的标准。这些标准已被大多数开发者使用多年。</p>

<p>请阅读下一章，看看 AJAX 是如何工作的！</p>
			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-create.html" rel="prev"> AJAX 创建 XMLHttpRequest 对象</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-example.html" rel="next"> AJAX 实例</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-intro.html" rel="prev"> AJAX 简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-examples.html" rel="next"> AJAX 实例</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX <span class="color_h1">实例</span>
</h1>
<hr>
<p class="intro">为了帮助您理解 AJAX 的工作原理，我们创建了一个小型的 AJAX 应用程序:</p>

<div class="example">
<h2 class="example">实例</h2>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
<div class="example_code notranslate">
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</div>
<br><a target="_blank" href="/try/try.php?filename=tryajax_first" class="tryitbtn">尝试一下 »</a>

</div>
<br><hr>
<h2>AJAX 实例解析</h2>
<p>上面的 AJAX 应用程序包含一个 div 和一个按钮。</p>
<p>div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：</p>

<div class="code notranslate"><div>

	&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>
&lt;body&gt;<br><br>
&lt;div id="myDiv"&gt;&lt;h2&gt;Let AJAX change this text&lt;/h2&gt;&lt;/div&gt;<br>
&lt;button type="button" onclick="loadXMLDoc()"&gt;Change 
Content&lt;/button&gt;<br><br>
&lt;/body&gt;<br>
&lt;/html&gt;
</div></div>
<p>接下来，在页面的 head 部分添加一个  &lt;script&gt; 标签。该标签中包含了这个 loadXMLDoc() 函数： </p>

<div class="code notranslate"><div>

&lt;head&gt;<br>
&lt;script&gt;<br>
function loadXMLDoc()<br>
{<br>
.... AJAX script goes here ...<br>
}<br>
&lt;/script&gt;<br>
&lt;/head&gt;
</div></div>
<p>下面的章节会为您讲解 AJAX 的工作原理。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-intro.html" rel="prev"> AJAX 简介</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-examples.html" rel="next"> AJAX 实例</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isplainobject.html" title="jQuery.isPlainObject()   方法">jQuery.isPlainO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isnumeric.html" title="jQuery.isNumeric()  方法">jQuery.isNumeri...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isfunction.html" title="jQuery.isFunction()  方法">jQuery.isFuncti...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-send.html" rel="prev"> AJAX &#8211; 向服务器发送请求</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-intro.html" rel="next"> AJAX 简介</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX - 创建 <span class="color_h1">XMLHttpRequest</span> 对象</h1>
<hr>
<p class="intro">XMLHttpRequest 是 AJAX 的基础。</p>
<hr>
<h2>XMLHttpRequest 对象</h2>

<p>所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。</p>

<p>XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。</p>

<hr>
<h2>创建 XMLHttpRequest 对象</h2>
<p>所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。</p>

<p>创建 XMLHttpRequest 对象的语法：</p>
<div class="code notranslate"><div>
<i>variable</i>=new XMLHttpRequest();</div></div>
<p>老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：</p>
<div class="code notranslate"><div>
<i>variable</i>=new ActiveXObject("Microsoft.XMLHTTP");</div></div>
<p>为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：:</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
var xmlhttp;<br>
if (window.XMLHttpRequest)<br>
  {// code for IE7+, Firefox, Chrome, Opera, Safari<br>
  xmlhttp=new XMLHttpRequest();<br>
  }<br>
else<br>
  {// code for IE6, IE5<br>
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br>
  }</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_first">尝试一下 »</a>
</div>
<p>在下一章中，您将学习发送服务器请求的知识。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-send.html" rel="prev"> AJAX &#8211; 向服务器发送请求</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-intro.html" rel="next"> AJAX 简介</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-response.html" rel="prev"> AJAX XMLHttpRequest 服务器响应</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-create.html" rel="next"> AJAX 创建 XMLHttpRequest 对象</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX - 向服务器发送请求<span class="color_h1">请求</span></h1>
<hr>
<p class="intro">XMLHttpRequest 对象用于和服务器交换数据。</p>
<hr>
<h2>向服务器发送请求</h2>
<p>如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：</p>
<div class="code notranslate"><div>
xmlhttp.open("GET","ajax_info.txt",true);<br>
xmlhttp.send();</div></div>
<br><table class="reference">

<tbody><tr>
<th style="width:40%;">方法</th>
<th>描述</th>
</tr>

<tr>
<td>open(<i>method</i>,<i>url</i>,<i>async</i>)</td>
<td>
	<p>规定请求的类型、URL 以及是否异步处理请求。</p>
	<ul class="listintable">
	<li><i>method</i>：请求的类型；GET 或 POST</li>
	<li><i>url</i>：文件在服务器上的位置</li>
	<li><i>async</i>：true（异步）或 false（同步）</li>
	</ul>
	</td>
</tr>

<tr>
<td>send(<i>string</i>)</td>
<td>
	<p>将请求发送到服务器。</p>
	<ul class="listintable">
	<li><i>string</i>：仅用于 POST 请求</li>
	</ul>
</td>
</tr>
</tbody></table>
<br><hr>
<h2>GET 还是 POST？</h2>

<p>与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。</p>

<p>然而，在以下情况中，请使用 POST 请求：</p>

<ul>
<li>无法使用缓存文件（更新服务器上的文件或数据库）</li>
<li>向服务器发送大量数据（POST 没有数据量限制）</li>
<li>发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠</li>
</ul>

<hr>
<h2>GET 请求</h2>

<p>一个简单的 GET 请求：</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
xmlhttp.open("GET","demo_get.html",true);<br>
xmlhttp.send();</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_get">尝试一下 »</a>
</div>
<p>在上面的例子中，您可能得到的是缓存的结果。</p>

<p>为了避免这种情况，请向 URL 添加一个唯一的 ID：</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);<br>
xmlhttp.send();</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_get_unique">尝试一下 »</a>
</div>
<p>如果您希望通过 GET 方法发送信息，请向 URL 添加信息：</p>


<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
xmlhttp.open("GET","demo_get2.html?fname=Henry&amp;lname=Ford",true);<br>
xmlhttp.send();</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_get2">尝试一下 »</a>
</div>
<br><hr>
<h2>POST 请求</h2>

<p>一个简单 POST 请求：</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
xmlhttp.open("POST","demo_post.html",true);<br>
xmlhttp.send();</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_post">尝试一下 »</a>
</div>
<p>如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
xmlhttp.open("POST","ajax_test.html",true);<br>
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");<br>
xmlhttp.send("fname=Henry&amp;lname=Ford");</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_post2">尝试一下 »</a>
</div>
<br><table class="reference notranslate">
<tr>
<th align="left" width="40%">方法</th>
    <th align="left" width="60%">描述</th>
  </tr>
<tr>
<td>setRequestHeader(<i>header,value</i>)</td>
 <td>
	<p>向请求添加 HTTP 头。</p>
	<ul class="listintable">
	<li><i>header</i>: 规定头的名称</li>
	<li><i>value</i>: 规定头的值</li>
	</ul>
</td>
</tr>
</table>
<br><hr>
<h2>url - 服务器上的文件</h2>

<p>open() 方法的 <i>url</i> 参数是服务器上文件的地址：</p>

<div class="code notranslate"><div>
xmlhttp.open("GET","ajax_test.html",true);</div></div>
<p>该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。</p>

<hr>
<h2>异步 - True 或 False？</h2>

<p>AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。</p>

<p>XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：</p>


<div class="code notranslate"><div>
xmlhttp.open("GET","ajax_test.html",true);</div></div>

<p>对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。</p>

<p>通过 AJAX，JavaScript 无需等待服务器的响应，而是：</p>

<ul>
<li>在等待服务器响应时执行其他脚本</li>
<li>当响应就绪后对响应进行处理</li>
</ul>

<hr>
<h2>Async=true</h2>
<p>当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
xmlhttp.onreadystatechange=function()<br>
  {<br>
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)<br>
    {<br>
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;<br>
    }<br>
  }<br>
xmlhttp.open("GET","ajax_info.txt",true);<br>
xmlhttp.send();</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_first">尝试一下 »</a>
</div>
<p>您将在稍后的章节学习更多有关 onreadystatechange 的内容。</p>

<hr>


<h2>Async = false</h2>

<p>如需使用 async=false，请将 open() 方法中的第三个参数改为 false：</p>

<pre>xmlhttp.open(&amp;quot;GET&amp;quot;,&amp;quot;test1.txt&amp;quot;,false);</pre>

<p>我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。</p>

<p>请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。</p>

<p><b>注意：</b>当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：</p>


<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
	xmlhttp.open("GET","ajax_info.txt",false);<br>
	xmlhttp.send();<br>
	document.getElementById("myDiv").innerHTML=xmlhttp.responseText;</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_asyncfalse">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-response.html" rel="prev"> AJAX XMLHttpRequest 服务器响应</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-create.html" rel="next"> AJAX 创建 XMLHttpRequest 对象</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html" rel="prev"> AJAX &#8211; onreadystatechange 事件</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-send.html" rel="next"> AJAX &#8211; 向服务器发送请求</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX - 服务器 <span class="color_h1">响应</span>
</h1>
<hr>
<h2>服务器响应</h2>
<p>如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。</p>
<table class="reference">

<tbody><tr>
<th style="width:25%;">属性</th>
<th>描述</th>
</tr>

<tr>
<td>responseText</td>
<td>获得字符串形式的响应数据。</td>
</tr>

<tr>
<td>responseXML</td>
<td>获得 XML 形式的响应数据。</td>
</tr>
</tbody></table>
<br><hr>
<h2> responseText 属性</h2>
<p>如果来自服务器的响应并非 XML，请使用 responseText 属性。</p>

<p>responseText 属性返回字符串形式的响应，因此您可以这样使用：</p>


<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_first">尝试一下 »</a>
</div>
<br><hr>
<h2>responseXML 属性</h2>

<p>如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：</p>



<div class="example">
<h2 class="example">实例</h2>
<p>请求 <a href="/try/demo_source/cd_catalog.xml">cd_catalog.xml</a> 文件，并解析响应：</p>
<div class="example_code notranslate">
xmlDoc=xmlhttp.responseXML;<br>
txt="";<br>
x=xmlDoc.getElementsByTagName("ARTIST");<br>
for (i=0;i&lt;x.length;i++)<br>
  {<br>
  txt=txt + x[i].childNodes[0].nodeValue + "&lt;br&gt;";<br>
  }<br>
document.getElementById("myDiv").innerHTML=txt;</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_responsexml">尝试一下 »</a>
</div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html" rel="prev"> AJAX &#8211; onreadystatechange 事件</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-send.html" rel="next"> AJAX &#8211; 向服务器发送请求</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-asp-php.html" rel="prev"> AJAX ASP/PHP</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-response.html" rel="next"> AJAX XMLHttpRequest 服务器响应</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX - <span class="color_h1">onreadystatechange</span> 事件</h1>
<hr>
<h2>onreadystatechange 事件</h2>
<p>当请求被发送到服务器时，我们需要执行一些基于响应的任务。</p>

<p>每当 readyState 改变时，就会触发 onreadystatechange 事件。</p>

<p>readyState 属性存有 XMLHttpRequest 的状态信息。</p>

<p>下面是 XMLHttpRequest 对象的三个重要的属性：</p>

<table class="reference notranslate">
<tr>
<th align="left" width="20%">属性</th>
    <th align="left" width="80%">描述</th>
  </tr>
<tr>
<td>onreadystatechange</td>
    <td>存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。</td>
  </tr>
<tr>
<td>readyState</td>
    <td>	<p>存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。</p>
	<ul class="listintable">
	<li>0: 请求未初始化</li>
	<li>1: 服务器连接已建立</li>
	<li>2: 请求已接收</li>
	<li>3: 请求处理中</li>
	<li>4: 请求已完成，且响应已就绪</li>
	</ul>
</td>
  </tr>
<tr>
<td>status</td>
    <td>200: "OK"<br>
	404: 未找到页面</td>
  </tr>
</table>
<p>在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。</p>

<p>当 readyState 等于 4 且状态为 200 时，表示响应已就绪：</p>


<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
xmlhttp.onreadystatechange=function()<br>
 
{<br>
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)<br>
    {<br>
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;<br>
    }<br>
  }
</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_first">尝试一下 »</a>
</div>
<p><b>注意：</b> onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。</p>
<hr>
<h2>使用回调函数</h2>
<p>回调函数是一种以参数形式传递给另一个函数的函数。</p>

<p>如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个<em>标准</em>的函数，并为每个 AJAX 任务调用该函数。</p>

<p>该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：</p>


<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
function myFunction()<br>
{<br>
loadXMLDoc("ajax_info.txt",function()<br>
  {<br>
 
if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)<br>
    {<br>
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;<br>
    }<br>
  });<br>
}</div>
<br><a target="_blank" class="tryitbtn" href="/try/try.php?filename=tryajax_callback">尝试一下 »</a>
</div>
<br><br>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-asp-php.html" rel="prev"> AJAX ASP/PHP</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-response.html" rel="next"> AJAX XMLHttpRequest 服务器响应</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-unique.html" title="jQuery.unique()  方法">jQuery.unique()...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-type.html" title="jQuery.type()   方法">jQuery.type()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-trim.html" title="jQuery.trim()  方法">jQuery.trim()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsexml.html" title="jQuery.parseXML()  方法">jQuery.parseXML...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsejson.html" title="jQuery.parseJSON()  方法">jQuery.parseJSO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-parsehtml.html" title="jQuery.parseHTML()  方法">jQuery.parseHTM...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-database.html" rel="prev"> AJAX 数据库</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html" rel="next"> AJAX &#8211; onreadystatechange 事件</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX <span class="color_h1">ASP/PHP 实例</span>
</h1>
<hr>
<p class="intro">AJAX 用于创造动态性更强的应用程序。</p>
<hr>
<h2>AJAX ASP/PHP 实例</h2>
<p>下面的例子将为您演示当用户在输入框中键入字符时，网页如何与 web 服务器进行通信：
请在下面的输入框中键入字母（A - Z）：</p>


<div class="example">
<h2 class="example">实例</h2>
<div class="example_result notranslate">
<p><b>Start typing a name in the input field below:</b></p>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p> 
</div>

<br><a target="_blank" href="/try/try.php?filename=tryajax_suggest" class="tryitbtn">尝试一下 »</a>
</div>
<br><hr>
<h2>实例解析 - showHint() 函数</h2>
<p>当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发：</p> 

<div class="code notranslate"><div>

function showHint(str)<br>
{<br>
var xmlhttp;<br>
if (str.length==0)<br>
  { <br>
  document.getElementById("txtHint").innerHTML="";<br>
  return;<br>
  }<br>
if (window.XMLHttpRequest)<br>
  {// code for IE7+, Firefox, Chrome, Opera, Safari<br>
  xmlhttp=new XMLHttpRequest();<br>
  }<br>
else<br>
  {// code for IE6, IE5<br>
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br>
  }<br>
xmlhttp.onreadystatechange=function()<br>
  {<br>
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)<br>
    {<br>
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;<br>
    }<br>
  }<br>
xmlhttp.open("GET","gethint.html?q="+str,true);<br>
xmlhttp.send();<br>
}</div></div>

<p>源代码解析：</p>
<p>如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。</p>

<p>如果输入框不为空，showHint() 函数执行以下任务：</p>
<ul>
<li>创建 XMLHttpRequest 对象</li>
<li>当服务器响应就绪时执行函数</li>
<li>把请求发送到服务器上的文件</li>
<li>请注意我们向 URL 添加了一个参数 q （带有输入框的内容）</li>
</ul>

<hr>
<h2>AJAX 服务器页面 - ASP 和 PHP</h2>

<p>由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 &quot;gethint.asp&quot;。</p>

<p>下面，我们创建了两个版本的服务器文件，一个用 ASP 编写，另一个用 PHP 编写。</p>

<h2> ASP 文件</h2>
<p>"gethint.asp" 中的源代码会检查一个名字数组，然后向浏览器返回相应的名字：</p>

<div class="code notranslate"><div>
&lt;%<br>
response.expires=-1<br>
dim a(30)<br>
'Fill up array with names<br>
a(1)="Anna"<br>
a(2)="Brittany"<br>
a(3)="Cinderella"<br>
a(4)="Diana"<br>
a(5)="Eva"<br>
a(6)="Fiona"<br>
a(7)="Gunda"<br>
a(8)="Hege"<br>
a(9)="Inga"<br>
a(10)="Johanna"<br>
a(11)="Kitty"<br>
a(12)="Linda"<br>
a(13)="Nina"<br>
a(14)="Ophelia"<br>
a(15)="Petunia"<br>
a(16)="Amanda"<br>
a(17)="Raquel"<br>
a(18)="Cindy"<br>
a(19)="Doris"<br>
a(20)="Eve"<br>
a(21)="Evita"<br>
a(22)="Sunniva"<br>
a(23)="Tove"<br>
a(24)="Unni"<br>
a(25)="Violet"<br>
a(26)="Liza"<br>
a(27)="Elizabeth"<br>
a(28)="Ellen"<br>
a(29)="Wenche"<br>
a(30)="Vicky"<br><br>
'get the q parameter from URL<br>
q=ucase(request.querystring("q"))<br><br>
'lookup all hints from array if length of q&gt;0<br>
if len(q)&gt;0 then<br>
   
  hint=""<br>
   
  for i=1 to 30<br>
       
    if q=ucase(mid(a(i),1,len(q))) then<br>
           
      if hint="" then<br>
               
        hint=a(i)<br>
           
      else<br>
               
        hint=hint &amp; " , " &amp; a(i)<br>
           
      end if<br>
       
    end if<br>
   
  next<br>
end if<br><br>
'Output "no suggestion" if no hint were found<br>
'or output the correct values<br>
if hint="" then<br>
   
  response.write("no suggestion")<br>
else<br>
   
  response.write(hint)<br>
end if<br>
%&gt;</div></div>
<br><hr>
<h2>PHP 文件</h2>

<p>下面的代码用 PHP 编写，与上面的 ASP 代码作用是一样的。</p>

<div class="code notranslate"><div>

&lt;?php<br>
// Fill up array with names<br>
$a[]="Anna";<br>
$a[]="Brittany";<br>
$a[]="Cinderella";<br>
$a[]="Diana";<br>
$a[]="Eva";<br>
$a[]="Fiona";<br>
$a[]="Gunda";<br>
$a[]="Hege";<br>
$a[]="Inga";<br>
$a[]="Johanna";<br>
$a[]="Kitty";<br>
$a[]="Linda";<br>
$a[]="Nina";<br>
$a[]="Ophelia";<br>
$a[]="Petunia";<br>
$a[]="Amanda";<br>
$a[]="Raquel";<br>
$a[]="Cindy";<br>
$a[]="Doris";<br>
$a[]="Eve";<br>
$a[]="Evita";<br>
$a[]="Sunniva";<br>
$a[]="Tove";<br>
$a[]="Unni";<br>
$a[]="Violet";<br>
$a[]="Liza";<br>
$a[]="Elizabeth";<br>
$a[]="Ellen";<br>
$a[]="Wenche";<br>
$a[]="Vicky";<br><br>
//get the q parameter from URL<br>
$q=$_GET["q"];<br><br>
//lookup all hints from array if length of q&gt;0<br>
if (strlen($q) &gt; 0)<br>
 
{<br>
   
  $hint="";<br>
   
  for($i=0; $i&lt;count($a); $i++)<br>
     
  {<br>
     
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))<br>
         
    {<br>
         
    if ($hint=="")<br>
             
      {<br>
             
      $hint=$a[$i];<br>
             
      }<br>
         
    else<br>
             
      {<br>
             
      $hint=$hint." , ".$a[$i];<br>
             
      }<br>
         
    }<br>
     
  }<br>
 
}<br><br>
// Set output to "no suggestion" if no hint were found<br>
// or to the correct values<br>
if ($hint == "")<br>
 
{<br>
 
$response="no suggestion";<br>
 
}<br>
else<br>
 
{<br>
 
$response=$hint;<br>
 
}<br><br>
//output the response<br>
echo $response;<br>
?&gt;</div></div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-database.html" rel="prev"> AJAX 数据库</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html" rel="next"> AJAX &#8211; onreadystatechange 事件</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlfile.html" rel="prev"> AJAX XML</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-asp-php.html" rel="next"> AJAX ASP/PHP</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX <span class="color_h1">Database 实例</span>
</h1>
<hr>
<p class="intro">AJAX 可用来与数据库进行动态通信。</p>
<hr>
<h2>AJAX 数据库实例</h2>
<p>下面的例子将演示网页如何通过 AJAX 从数据库读取信息：
请在下面的下拉列表中选择一个客户：</p>

<div class="example">
<h2 class="example">Example</h2>
<div class="example_result notranslate">
<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</div>
<br><a target="_blank" href="/try/try.php?filename=tryajax_database" class="tryitbtn">尝试一下 »</a>
</div>
<br><hr>

<h2>实例解释 - showCustomer() 函数</h2>
<p>当用户在上面的下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发：</p> 

<div class="code notranslate"><div>

function showCustomer(str)<br>
{<br>
var xmlhttp;<br>
if (str=="")<br>
  {<br>
  document.getElementById("txtHint").innerHTML="";<br>
  return;<br>
  }<br>
if (window.XMLHttpRequest)<br>
  {// code for IE7+, Firefox, Chrome, Opera, Safari<br>
  xmlhttp=new XMLHttpRequest();<br>
  }<br>
else<br>
  {// code for IE6, IE5<br>
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br>
  }<br>
xmlhttp.onreadystatechange=function()<br>
  {<br>
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)<br>
    {<br>
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;<br>
    }<br>
  }<br>
xmlhttp.open("GET","getcustomer.html?q="+str,true);<br>
xmlhttp.send();<br>
}</div></div>
<p>showCustomer() 函数执行以下任务：</p>
<ul>
<li>检查是否已选择某个客户</li>
<li>创建 XMLHttpRequest 对象</li>
<li>当服务器响应就绪时执行所创建的函数</li>
<li>把请求发送到服务器上的文件</li>
<li>请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）</li>
</ul>

<hr>
<h2>AJAX 服务器页面</h2>

<p>由上面的 JavaScript 调用的服务器页面是 PHP 文件，名为 &quot;getcustomer.php&quot;。</p>

<p>用 PHP 编写服务器文件也很容易，或者用其他服务器语言。请看<a href="/php/php-ajax-database.html" title="PHP 和 AJAX MySQL 数据库实例">用 PHP 编写的相应的例子</a>。</p>

<p>&quot;getcustomer.php&quot; 中的源代码负责对数据库进行查询，然后用 HTML 表格返回结果：</p>


<div class="code notranslate"><div>

&lt;%<br>
response.expires=-1<br>
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="<br>
sql=sql &amp; "'" &amp; request.querystring("q") &amp; "'"<br><br>
set conn=Server.CreateObject("ADODB.Connection")<br>
conn.Provider="Microsoft.Jet.OLEDB.4.0"<br>
conn.Open(Server.Mappath("/db/northwind.mdb"))<br>
set rs=Server.CreateObject("ADODB.recordset")<br>
rs.Open sql,conn<br><br>
response.write("&lt;table&gt;")<br>
do until rs.EOF<br>
   
  for each x in rs.Fields<br>
       
    response.write("&lt;tr&gt;&lt;td&gt;&lt;b&gt;" &amp; x.name &amp; "&lt;/b&gt;&lt;/td&gt;")<br>
       
    response.write("&lt;td&gt;" &amp; x.value &amp; "&lt;/td&gt;&lt;/tr&gt;")<br>
   
  next<br>
   
  rs.MoveNext<br>
loop<br>response.write("&lt;/table&gt;")<br>
%&gt;</div></div>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-xmlfile.html" rel="prev"> AJAX XML</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-asp-php.html" rel="next"> AJAX ASP/PHP</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop()  ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" value="搜索……" name="s" autocomplete="off">
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        <div class="col search search-desktop last">
      <form action="http://www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" value="搜索……"  autocomplete="off">
      </form>
    </div>
  </div>
</div>


<!-- 导航栏 -->
<!-- 导航栏 -->
<div class="container navigation">
	<div class="row">
		<div class="col nav">
			<ul class="pc-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
				<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
				<li><a href="/sql/sql-tutorial.html">SQL</a></li>
				<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
				<li><a href="/php/php-tutorial.html">PHP</a></li>
				<li><a href="/python/python-tutorial.html">Python</a></li>
				<li><a href="/cprogramming/c-tutorial.html">C</a></li>
				<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
				<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
				<li><a href="/java/java-tutorial.html">Java</a></li>
				<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
				
				<li><a href="/sitemap">更多……</a></li>
      		</ul>
			<ul class="mobile-nav">
				<li><a href="http://www.runoob.com/">首页</a></li>
				<li><a href="/html/html-tutorial.html">HTML</a></li>
				<li><a href="/css/css-tutorial.html">CSS</a></li>
				<li><a href="/js/js-tutorial.html">JavaScript</a></li>
				<a href="javascript:void(0)" class="search-reveal">Search</a> 
			</ul>
			
		</div>
	</div>
</div><!--  内容  -->
<div class="container main">
	<!-- 中间 -->
	<div class="row">
	
<div class="col left-column">
	<div class="tab">Ajax 教程</div>
	<div class="sidebar-box gallery-list">
		<div class="design" id="leftcolumn">
						<a target="_top" title="AJAX 教程"  href="/ajax/ajax-tutorial.html" >
			AJAX 教程			</a>
						<a target="_top" title="AJAX 简介"  href="/ajax/ajax-intro.html" >
			AJAX 简介			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-example.html" >
			AJAX 实例			</a>
						<a target="_top" title="AJAX 创建 XMLHttpRequest 对象"  href="/ajax/ajax-xmlhttprequest-create.html" >
			XHR 创建对象			</a>
						<a target="_top" title="AJAX &#8211; 向服务器发送请求"  href="/ajax/ajax-xmlhttprequest-send.html" >
			XHR 请求			</a>
						<a target="_top" title="AJAX XMLHttpRequest 服务器响应"  href="/ajax/ajax-xmlhttprequest-response.html" >
			XHR 响应			</a>
						<a target="_top" title="AJAX &#8211; onreadystatechange 事件"  href="/ajax/ajax-xmlhttprequest-onreadystatechange.html" >
			XHR readyState			</a>
						<a target="_top" title="AJAX ASP/PHP"  href="/ajax/ajax-asp-php.html" >
			AJAX ASP/PHP			</a>
						<a target="_top" title="AJAX 数据库"  href="/ajax/ajax-database.html" >
			AJAX 数据库			</a>
						<a target="_top" title="AJAX XML"  href="/ajax/ajax-xmlfile.html" >
			AJAX XML			</a>
						<a target="_top" title="AJAX 实例"  href="/ajax/ajax-examples.html" >
			AJAX 实例			</a>
				
		</div>
	</div>	
</div>	<div class="col middle-column">
		
	
	<div class="article">
			<div class="article-heading-ad">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 移动版 自动调整 -->
		<ins class="adsbygoogle"
		     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
		     data-ad-client="ca-pub-5751451760833794"
		     data-ad-slot="1691338467"
		     data-ad-format="horizontal"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-tutorial.html" rel="prev"> AJAX 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-database.html" rel="next"> AJAX 数据库</a> →</div>
		</div>
		<div class="article-body">
		
			<div class="article-intro" id="content">
			
			<h1>AJAX <span class="color_h1">XML 实例</span>
</h1>
<hr>
<p class="intro">AJAX 可用来与 XML 文件进行交互式通信。</p>
<hr>
<h2>AJAX XML 实例</h2>
<p>下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息：</p>

<div class="example">
<h2 class="example">实例</h2>
<div class="example_result notranslate">
<div id="txtCDInfo">
<button>Get CD info</button>
</div>
</div>
<br><a target="_blank" href="/try/try.php?filename=tryajax_xml2" class="tryitbtn">尝试一下 »</a>
</div>
<br><hr>
<h2>实例解析 - loadXMLDoc() 函数</h2>
<p>当用户点击上面的"获得 CD 信息"这个按钮，就会执行 loadXMLDoc() 函数。</p>

<p>loadXMLDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。</p>

<p>当服务器响应就绪时，会构建一个 HTML 表格，从 XML 文件中提取节点（元素），最后使用已经填充了 XML 数据的 HTML 表格来更新 txtCDInfo 占位符：</p>





<div class="code notranslate"><div>

function loadXMLDoc(url)<br>
{<br>
var xmlhttp;<br>
var txt,xx,x,i;<br>
if (window.XMLHttpRequest)<br>
  {// code for IE7+, Firefox, Chrome, Opera, Safari<br>
  xmlhttp=new XMLHttpRequest();<br>
  }<br>
else<br>
  {// code for IE6, IE5<br>
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");<br>
  }<br>
xmlhttp.onreadystatechange=function()<br>
  {<br>
  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)<br>
    {<br>
    txt="&lt;table border='1'&gt;&lt;tr&gt;&lt;th&gt;Title&lt;/th&gt;&lt;th&gt;Artist&lt;/th&gt;&lt;/tr&gt;";<br>
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");<br>
    for (i=0;i&lt;x.length;i++)<br>
      {<br>
      txt=txt + "&lt;tr&gt;";<br>
      xx=x[i].getElementsByTagName("TITLE");<br>
        {<br>
        try<br>
          {<br>
          txt=txt + "&lt;td&gt;" + 
xx[0].firstChild.nodeValue + "&lt;/td&gt;";<br>
          }<br>
        catch (er)<br>
          {<br>
          txt=txt + "&lt;td&gt;&amp;nbsp;&lt;/td&gt;";<br>
          }<br>
        }<br>
    xx=x[i].getElementsByTagName("ARTIST");<br>
      {<br>
        try<br>
          {<br>
          txt=txt + "&lt;td&gt;" + 
xx[0].firstChild.nodeValue + "&lt;/td&gt;";<br>
          }<br>
        catch (er)<br>
          {<br>
          txt=txt + "&lt;td&gt;&amp;nbsp;&lt;/td&gt;";<br>
          }<br>
        }<br>
      txt=txt + "&lt;/tr&gt;";<br>
      }<br>
    txt=txt + "&lt;/table&gt;";<br>
    document.getElementById('txtCDInfo').innerHTML=txt;<br>
    }<br>
  }<br>
xmlhttp.open("GET",url,true);<br>
xmlhttp.send();<br>
}</div></div>
<br><hr>
<h2>AJAX 服务器页面</h2>
<p>上面这个例子中使用的服务器页面实际上是一个名为 "<a target="_blank" href="/try/demo_source/cd_catalog.xml">cd_catalog.xml</a>"  XML 文件。</p>			
			
			</div>
		</div>
		
		<div class="previous-next-links">
			<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-tutorial.html" rel="prev"> AJAX 教程</a> </div>
			<div class="next-design-link"><a href="http://www.runoob.com/ajax/ajax-database.html" rel="next"> AJAX 数据库</a> →</div>
		</div>
		
		<div class="sidebar-box ad-box ad-box-large">
		<div class="ad-336280">
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="rectangle"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
		</div>
		
	</div>
</div>
	

<!-- 右边栏 -->
<div class="fivecol last right-column">
	<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
	<div class="sidebar-box">
		<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
		<div class="qqinfo">
		<!-- <a target="_blank" href="http://jq.qq.com/?_wv=1027&k=dOwwKN" id="qqhref">
		<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="菜鸟家族" title="菜鸟家族"></a>
		<span>(群号：<span id="qqid">365967760</span>)</span>-->
		</div>
		
	</div>
	

	
	<div class="tab tab-light-blue">分类导航</div>
	<div class="sidebar-box sidebar-cate">
		
		<div class="sidebar-tree" >
			<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul>			</div>
	
	</div>
	
	<br>
	
	<div class="sidebar-box ad-box ad-box-large">
		<div class="sidebar-box advertise-here">
			<a href="javascript:void(0);">Advertisement</a>
		</div>
		<div class="ad-600160">
		<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 侧栏1 -->
		<ins class="adsbygoogle"
			 style="display:inline-block;width:160px;height:600px"
			 data-ad-client="ca-pub-5751451760833794"
			 data-ad-slot="4106274865"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
		</div>
	</div>
</div></div>

</div>
<!-- 底部 -->


<div id="footer" class="mar-t50">
   <div class="w3cschoolcc-block">
    <div class="w3cschoolcc cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a href="/html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a href="/js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a href="/xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a href="/java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
      </dd> 
      <dd>
       &middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
      </dd>
      <dd>
       &middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a href="/jsontool">JSON 格式化工具</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map()   ...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isplainobject.html" title="jQuery.isPlainObject()   方法">jQuery.isPlainO...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isnumeric.html" title="jQuery.isNumeric()  方法">jQuery.isNumeri...</a>
      </dd>
              <dd>
       &middot;
      <a href="http://www.runoob.com/jquery/misc-isfunction.html" title="jQuery.isFunction()  方法">jQuery.isFuncti...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
      </dd>
      <dd>
       &middot;
      <a href="/disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a href="/aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a href="/archives">文章归档</a>
      </dd>
      
     </dl>
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
       </div>
     </div>
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2016    <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
    </div>
  </div>
<div style="display:none;">
  <script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
<form action="index.php">
<input class="placeholder" value="搜索……" name="s" autocomplete="off">
</form>
</div>
<div class="row">
<div class="col logo">
<h1><a href="/">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
</div>
<div class="col right-list">
<button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
</div>
<div class="col search search-desktop last">
<form action="http://www.runoob.com/" target="_blank">
<input class="placeholder" id="s" name="s" value="搜索……" autocomplete="off">
</form>
</div>
</div>
</div>
<div class="container navigation">
<div class="row">
<div class="col nav">
<ul class="pc-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
<li><a href="/bootstrap/bootstrap-tutorial.html">Bootstrap</a></li>
<li><a href="/sql/sql-tutorial.html">SQL</a></li>
<li><a href="/mysql/mysql-tutorial.html">MySQL</a></li>
<li><a href="/php/php-tutorial.html">PHP</a></li>
<li><a href="/python/python-tutorial.html">Python</a></li>
<li><a href="/cprogramming/c-tutorial.html">C</a></li>
<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
<li><a href="/java/java-tutorial.html">Java</a></li>
<li><a href="/ruby/ruby-tutorial.html">Ruby</a></li>
<li><a href="/sitemap">更多……</a></li>
</ul>
<ul class="mobile-nav">
<li><a href="http://www.runoob.com/">首页</a></li>
<li><a href="/html/html-tutorial.html">HTML</a></li>
<li><a href="/css/css-tutorial.html">CSS</a></li>
<li><a href="/js/js-tutorial.html">JavaScript</a></li>
<a href="javascript:void(0)" class="search-reveal">Search</a>
</ul>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col left-column">
<div class="tab">Ajax 教程</div>
<div class="sidebar-box gallery-list">
<div class="design" id="leftcolumn">
<a target="_top" title="AJAX 教程" href="/ajax/ajax-tutorial.html">
AJAX 教程 </a>
<a target="_top" title="AJAX 简介" href="/ajax/ajax-intro.html">
AJAX 简介 </a>
<a target="_top" title="AJAX 实例" href="/ajax/ajax-example.html">
AJAX 实例 </a>
<a target="_top" title="AJAX 创建 XMLHttpRequest 对象" href="/ajax/ajax-xmlhttprequest-create.html">
XHR 创建对象 </a>
<a target="_top" title="AJAX &#8211; 向服务器发送请求" href="/ajax/ajax-xmlhttprequest-send.html">
XHR 请求 </a>
<a target="_top" title="AJAX XMLHttpRequest 服务器响应" href="/ajax/ajax-xmlhttprequest-response.html">
XHR 响应 </a>
<a target="_top" title="AJAX &#8211; onreadystatechange 事件" href="/ajax/ajax-xmlhttprequest-onreadystatechange.html">
XHR readyState </a>
<a target="_top" title="AJAX ASP/PHP" href="/ajax/ajax-asp-php.html">
AJAX ASP/PHP </a>
<a target="_top" title="AJAX 数据库" href="/ajax/ajax-database.html">
AJAX 数据库 </a>
<a target="_top" title="AJAX XML" href="/ajax/ajax-xmlfile.html">
AJAX XML </a>
<a target="_top" title="AJAX 实例" href="/ajax/ajax-examples.html">
AJAX 实例 </a>
</div>
</div>
</div> <div class="col middle-column">
<div class="article">
<div class="article-heading-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="horizontal"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-example.html" rel="prev"> AJAX 实例</a> </div>
<div class="next-design-link"></div>
</div>
<div class="article-body">
<div class="article-intro" id="content">
<h1>AJAX <span class="color_h1">实例</span>
</h1>
<hr>
<div class="tryit_ex">
<img src="/images/tryitimg.gif" width="40" height="46px" alt="实例"><h2>AJAX 实例</h2>
</div>
<p><a href="/try/try.php?filename=tryajax_first" target="_blank">一个简单的AJAX实例</a></p>
<p>创建一个简单的XMLHttpRequest，从一个TXT文件中返回数据。</p>
<p><a href="/try/try.php?filename=tryajax_xml" target="_blank">用AJAX加载 XML 文件</a></p>
<p>创建一个简单的XMLHttpRequest，从一个XML文件中返回数据。</p>
<p><a href="/try/try.php?filename=tryajax_header" target="_blank">用AJAX进行一次 HEAD 请求</a></p>
<p>检索资源（文件）的头信息。</p>
<p><a href="/try/try.php?filename=tryajax_lastmodified" target="_blank">用AJAX进行一次指定的 HEAD 请求</a></p>
<p>检索资源（文件）的指定头信息。</p>
<p><a href="/try/try.php?filename=tryajax_suggest" target="_blank">用AJAX从ASP 文件返回数据</a></p>
<p>当用户在文本框内键入字符时网页如何与Web服务器进行通信</p>
<p><a href="/try/try.php?filename=tryajax_database" target="_blank">用AJAX从数据库返回数据</a></p>
<p>用AJAX网页如何获取数据库中的信息</p>
<p><a href="/try/try.php?filename=tryajax_xml2" target="_blank">用AJAX从XML 文件返回数据</a></p>
<p>创建一个XMLHttpRequest从XML文件中检索数据并显示在一个HTML表格中。</p>
<p><a href="/try/try.php?filename=tryajax_callback" target="_blank">用callback函数的AJAX实例</a></p>
<p>用一个callback函数创建一个XMLHttpRequest，并从一个TXT文件中检索数据。</p>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">← <a href="http://www.runoob.com/ajax/ajax-example.html" rel="prev"> AJAX 实例</a> </div>
<div class="next-design-link"></div>
</div>
<div class="sidebar-box ad-box ad-box-large">
<div class="ad-336280">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;min-width:200px;max-width:360px;width:100%;height:100%px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="1691338467" data-ad-format="rectangle"></ins>
<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
</div>
</div>
</div>
</div>
<div class="fivecol last right-column">
<div class="tab tab-light-blue" style="text-align: center;">关注微信</div>
<div class="sidebar-box">
<a href="http://m.runoob.com/" target="_blank"> <img src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" alt="移动版"> </a>
<div class="qqinfo">
</div>
</div>
<div class="tab tab-light-blue">分类导航</div>
<div class="sidebar-box sidebar-cate">
<div class="sidebar-tree">
<ul><li><a href="javascript:void(0);" class="tit">HTML / CSS</a><ul><li><a title="HTML 教程" href="http://www.runoob.com/html/html-tutorial.html">HTML 教程</a></li><li><a title="HTML5 教程" href="http://www.runoob.com/html/html5-intro.html">HTML5 教程</a></li><li><a title="CSS 教程" href="http://www.runoob.com/css/css-tutorial.html">CSS 教程</a></li><li><a title="CSS3 教程" href="http://www.runoob.com/css3/css3-tutorial.html">CSS3 教程</a></li><li><a title="Bootstrap 教程" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li><li><a title="Foundation 教程" href="http://www.runoob.com/foundation/foundation-tutorial.html">Foundation 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">JavaScript</a><ul><li><a title="JavaScript 教程" href="http://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li><li><a title="HTML DOM 教程" href="http://www.runoob.com/htmldom/htmldom-tutorial.html">HTML DOM 教程</a></li><li><a title="jQuery 教程" href="http://www.runoob.com/jquery/jquery-tutorial.html">jQuery 教程</a></li><li><a title="AngularJS 教程" href="http://www.runoob.com/angularjs/angularjs-tutorial.html">AngularJS 教程</a></li><li><a title="React 教程" href="http://www.runoob.com/react/react-tutorial.html">React 教程</a></li><li><a title="jQuery UI 教程" href="http://www.runoob.com/jqueryui/jqueryui-tutorial.html">jQuery UI 教程</a></li><li><a title="jQuery EasyUI 教程" href="http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html">jQuery EasyUI 教程</a></li><li><a title="Node.js 教程" href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js 教程</a></li><li><a title="AJAX 教程" href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX 教程</a></li><li><a title="JSON 教程" href="http://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li><li><a title="Highcharts 教程" href="http://www.runoob.com/highcharts/highcharts-tutorial.html">Highcharts 教程</a></li><li><a title="Google 地图 教程" href="http://www.runoob.com/googleapi/google-maps-basic.html">Google 地图 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">服务端</a><ul><li><a title="PHP 教程" href="http://www.runoob.com/php/php-tutorial.html">PHP 教程</a></li><li><a title="Python 教程" href="http://www.runoob.com/python/python-tutorial.html">Python 教程</a></li><li><a title="Python3 教程" href="http://www.runoob.com/python3/python3-tutorial.html">Python3 教程</a></li><li><a title="Django 教程" href="http://www.runoob.com/django/django-tutorial.html">Django 教程</a></li><li><a title="Linux 教程" href="http://www.runoob.com/linux/linux-tutorial.html">Linux 教程</a></li><li><a title="Docker 教程" href="http://www.runoob.com/docker/docker-tutorial.html">Docker 教程</a></li><li><a title="Ruby 教程" href="http://www.runoob.com/ruby/ruby-tutorial.html">Ruby 教程</a></li><li><a title="Java 教程" href="http://www.runoob.com/java/java-tutorial.html">Java 教程</a></li><li><a title="C 教程" href="http://www.runoob.com/c/c-tutorial.html">C 教程</a></li><li><a title="C++ 教程" href="http://www.runoob.com/cplusplus/cpp-tutorial.html">C++ 教程</a></li><li><a title="Perl 教程" href="http://www.runoob.com/perl/perl-tutorial.html">Perl 教程</a></li><li><a title="Servlet 教程" href="http://www.runoob.com/servlet/servlet-tutorial.html">Servlet 教程</a></li><li><a title="JSP 教程" href="http://www.runoob.com/jsp/jsp-tutorial.html">JSP 教程</a></li><li><a title="Lua 教程" href="http://www.runoob.com/lua/lua-tutorial.html">Lua 教程</a></li><li><a title="Scala 教程" href="http://www.runoob.com/scala/scala-tutorial.html">Scala 教程</a></li><li><a title="Go 教程" href="http://www.runoob.com/go/go-tutorial.html">Go 教程</a></li><li><a title="设计模式" href="http://www.runoob.com/design-pattern/design-pattern-tutorial.html">设计模式</a></li><li><a title="正则表达式" href="http://www.runoob.com/regexp/regexp-tutorial.html">正则表达式</a></li><li><a title="ASP 教程" href="http://www.runoob.com/asp/asp-tutorial.html">ASP 教程</a></li><li><a title="AppML 教程" href="http://www.runoob.com/appml/appml-tutorial.html">AppML 教程</a></li><li><a title="VBScript 教程" href="http://www.runoob.com/vbscript/vbscript-tutorial.html">VBScript 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">数据库</a><ul><li><a title="SQL 教程" href="http://www.runoob.com/sql/sql-tutorial.html">SQL 教程</a></li><li><a title="Mysql 教程" href="http://www.runoob.com/mysql/mysql-tutorial.html">Mysql 教程</a></li><li><a title="SQLite 教程" href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite 教程</a></li><li><a title="MongoDB 教程" href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB 教程</a></li><li><a title="Redis 教程" href="http://www.runoob.com/redis/redis-tutorial.html">Redis 教程</a></li><li><a title="Memcached 教程" href="http://www.runoob.com/Memcached/Memcached-tutorial.html">Memcached 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">移动端</a><ul><li><a title="Android 教程" href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android 教程</a></li><li><a title="Swift 教程" href="http://www.runoob.com/swift/swift-tutorial.html">Swift 教程</a></li><li><a title="jQuery Mobile 教程" href="http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html">jQuery Mobile 教程</a></li><li><a title="ionic 教程" href="http://www.runoob.com/ionic/ionic-tutorial.html">ionic 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">XML 教程</a><ul><li><a title="XML 教程" href="http://www.runoob.com/xml/xml-tutorial.html">XML 教程</a></li><li><a title="DTD 教程" href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD 教程</a></li><li><a title="XML DOM 教程" href="http://www.runoob.com/dom/dom-tutorial.html">XML DOM 教程</a></li><li><a title="XSLT 教程" href="http://www.runoob.com/xsl/xsl-tutorial.html">XSLT 教程</a></li><li><a title="XPath 教程" href="http://www.runoob.com/xpath/xpath-tutorial.html">XPath 教程</a></li><li><a title="XQuery 教程" href="http://www.runoob.com/xquery/xquery-tutorial.html">XQuery 教程</a></li><li><a title="XLink 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XLink 教程</a></li><li><a title="XPointer 教程" href="http://www.runoob.com/xlink/xlink-tutorial.html">XPointer 教程</a></li><li><a title="XML Schema 教程" href="http://www.runoob.com/schema/schema-tutorial.html">XML Schema 教程</a></li><li><a title="XSL-FO 教程" href="http://www.runoob.com/xslfo/xslfo-tutorial.html">XSL-FO 教程</a></li><li><a title="SVG 教程" href="http://www.runoob.com/svg/svg-tutorial.html">SVG 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">ASP.NET</a><ul><li><a title="ASP.NET 教程" href="http://www.runoob.com/aspnet/aspnet-tutorial.html">ASP.NET 教程</a></li><li><a title="C# 教程" href="http://www.runoob.com/csharp/csharp-tutorial.html">C# 教程</a></li><li><a title="Web Pages 教程" href="http://www.runoob.com/aspnet/webpages-intro.html">Web Pages 教程</a></li><li><a title="Razor 教程" href="http://www.runoob.com/aspnet/razor-intro.html">Razor 教程</a></li><li><a title="MVC 教程" href="http://www.runoob.com/aspnet/mvc-intro.html">MVC 教程</a></li><li><a title="Web Forms 教程" href="http://www.runoob.com/aspnet/aspnet-intro.html">Web Forms 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">Web Services</a><ul><li><a title="Web Services 教程" href="http://www.runoob.com/webservices/webservices-tutorial.html">Web Services 教程</a></li><li><a title="WSDL 教程" href="http://www.runoob.com/wsdl/wsdl-tutorial.html">WSDL 教程</a></li><li><a title="SOAP 教程" href="http://www.runoob.com/soap/soap-tutorial.html">SOAP 教程</a></li><li><a title="RSS 教程" href="http://www.runoob.com/rss/rss-tutorial.html">RSS 教程</a></li><li><a title="RDF 教程" href="http://www.runoob.com/rdf/rdf-tutorial.html">RDF 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">开发工具</a><ul><li><a title="Eclipse 教程" href="http://www.runoob.com/eclipse/eclipse-tutorial.html">Eclipse 教程</a></li><li><a title="Git 教程" href="http://www.runoob.com/git/git-tutorial.html">Git 教程</a></li><li><a title="Firebug 教程" href="http://www.runoob.com/firebug/firebug-tutorial.html">Firebug 教程</a></li></ul></li><li><a href="javascript:void(0);" class="tit">网站建设</a><ul><li><a title="HTTP 教程" href="http://www.runoob.com/http/http-tutorial.html">HTTP 教程</a></li><li><a title="网站建设指南" href="http://www.runoob.com/web/web-buildingprimer.html">网站建设指南</a></li><li><a title="浏览器信息" href="http://www.runoob.com/browsers/browser-information.html">浏览器信息</a></li><li><a title="网站主机教程" href="http://www.runoob.com/hosting/hosting-tutorial.html">网站主机教程</a></li><li><a title="TCP/IP 教程" href="http://www.runoob.com/tcpip/tcpip-tutorial.html">TCP/IP 教程</a></li><li><a title="W3C 教程" href="http://www.runoob.com/w3c/w3c-tutorial.html">W3C 教程</a></li><li><a title="网站品质" href="http://www.runoob.com/quality/quality-tutorial.html">网站品质</a></li></ul></li></ul> </div>
</div>
<br>
<div class="sidebar-box ad-box ad-box-large">
<div class="sidebar-box advertise-here">
<a href="javascript:void(0);">Advertisement</a>
</div>
<div class="ad-600160">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-5751451760833794" data-ad-slot="4106274865"></ins>
<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
</div>
</div>
</div></div>
</div>
<div id="footer" class="mar-t50">
<div class="w3cschoolcc-block">
<div class="w3cschoolcc cf">
<dl>
<dt>
在线实例
</dt>
<dd>
&middot;<a href="/html/html-examples.html">HTML 实例</a>
</dd>
<dd>
&middot;<a href="/css/css-examples.html">CSS 实例</a>
</dd>
<dd>
&middot;<a href="/js/js-examples.html">JavaScript 实例</a>
</dd>
<dd>
&middot;<a href="/ajx/ajax-examples.html">Ajax 实例</a>
</dd>
<dd>
&middot;<a href="/jquery/jquery-examples.html">jQuery 实例</a>
</dd>
<dd>
&middot;<a href="/xml/xml-examples.html">XML 实例</a>
</dd>
<dd>
&middot;<a href="/java/java-examples.html">Java 实例</a>
</dd>
</dl>
<dl>
<dt>
字符集&工具
</dt>
<dd>
&middot; <a href="/charsets/html-charsets.html">HTML 字符集设置</a>
</dd>
<dd>
&middot; <a href="/tags/html-ascii.html">HTML ASCII 字符集</a>
</dd>
<dd>
&middot; <a href="/tags/ref-entities.html">HTML ISO-8859-1</a>
</dd>
<dd>
&middot; <a href="/tags/ref-symbols.html">HTML 实体符号</a>
</dd>
<dd>
&middot; <a href="/tags/html-colorpicker.html">HTML 拾色器</a>
</dd>
<dd>
&middot; <a href="/jsontool">JSON 格式化工具</a>
</dd>
</dl>
<dl>
<dt>
最新更新
</dt>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-now.html" title="jQuery.now() 方法">jQuery.now() 方法</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-noop.html" title="jQuery.noop()  方法">jQuery.noop() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-merge.html" title="jQuery.merge()  方法">jQuery.merge() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-map.html" title="jQuery.map()   方法">jQuery.map() ...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-makearray.html" title="jQuery.makeArray()  方法">jQuery.makeArra...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-isxmldoc.html" title="jQuery.isXMLDoc()  方法">jQuery.isXMLDoc...</a>
</dd>
<dd>
&middot;
<a href="http://www.runoob.com/jquery/misc-iswindow.html" title="jQuery.isWindow()  方法">jQuery.isWindow...</a>
</dd>
</dl>
<dl>
<dt>
站点信息
</dt>
<dd>
&middot;
<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" rel="external nofollow">意见反馈</a>
</dd>
<dd>
&middot;
<a href="/disclaimer">免责声明</a>
</dd>
<dd>
&middot;
<a href="/aboutus">关于我们</a>
</dd>
<dd>
&middot;
<a href="/archives">文章归档</a>
</dd>
</dl>
<div class="search-share">
<div class="app-download">
<div>
<strong>关注微信</strong>
</div>
</div>
<div class="share">
<img width="150" height="150" src="http://www.runoob.com/wp-content/themes/w3cschool.cc/assets/img/qrcode.jpg" />
</div>
</div>
</div>
</div>
<div class="w-1000 copyright">
Copyright &copy; 2013-2016 <strong><a href="http://www.runoob.com/" target="_blank">菜鸟教程</a></strong>&nbsp;
<strong><a href="http://www.runoob.com/" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
<a class="writer" target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=ssbDyoOAgfLU3crf09venNHd3w" style="font-size: 12px;" title="Bug 反馈">反馈</a>
<div id="bottom-qrcode" class="modal panel-modal hide fade in">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" width="128" height="128" src="http://www.runoob.com/wp-content/themes/runoob/assets/img/qrcode.jpg"></div>
</div>
</div>
<div style="display:none;">
<script src="http://s11.cnzz.com/stat.php?id=5578006&web_id=5578006" language="JavaScript"></script>
<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?8e2a116daf0104a78d601f40a45c75b4";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
</div>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/main.js?v=1.02"></script>
<script src="http://www.runoob.com/wp-content/themes/runoob/assets/js/hl/run_prettify.js?v=1.02"></script>
</body>
</html>